<template>
	<view class="mapWrap">
		<view class="mapItem"
			:style="{'background':item.bgCol}"
			v-for="(item,index) in stepList"
			:key="index"
			@tap="goSourceDet(item.name)"
		>
			<image class="stepImg" mode="widthFix" :src="item.url"></image>
			<view class="stepName">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{ 
				stepList:[
					{name:'视频讲解',bgCol:'#64ccf2',url:'/static/images/zhuxue/stepNum_1.png'},
					{name:'点拨指导',bgCol:'#fec812',url:'/static/images/zhuxue/stepNum_2.png'},
					{name:'知识清单',bgCol:'#c7da33',url:'/static/images/zhuxue/stepNum_3.png'},
					{name:'解题示范',bgCol:'#00c495',url:'/static/images/zhuxue/stepNum_4.png'}
				],
				loreId:0,
				loreName:''
			}
		},
		onLoad(options){
			this.loreId = options.loreId;
			let title = options?.loreName || '本知识点学习';
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title
				})
			},100)
		},
		methods:{
			goSourceDet(loreTypeName){
				uni.navigateTo({
					url:'/pages/subIndex/studyMap/mapDet?loreId=' + this.loreId + '&loreTypeName=' + loreTypeName
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mapWrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		@include respTo(phone){
			padding:30rpx 30rpx 0;
		}
		@include respTo(pad){
			padding:20rpx 20rpx 0;
		}
		.mapItem{
			width: 48%;
			border-radius: 15rpx;
			position: relative;
			@include respTo(phone){
				height: 360rpx;
				margin-bottom: 30rpx;
			}
			@include respTo(pad){
				height: 320rpx;
				margin-bottom: 20rpx;
			}
			.stepName{
				color: #fff;
				position: absolute;
				right: 30rpx;
				bottom: 20rpx;
				@include respTo(phone){
					font-size: $font-size32;
				}
				@include respTo(pad){
					font-size: $padSize24;
				}
			}
			.stepImg{
				@include respTo(phone){
					width: 180rpx;
				}
				@include respTo(pad){
					width: 150rpx;
				}
				position: absolute;
				left: 30rpx;
				top: 0;
			}
		}
	}
</style>